<template>
  <el-form :inline="true" :model="model" class="query-form-inline">
    <el-form-item class="query-form-item" v-for="(item, index) in formItems" :key="index" :label="item.label">
      <component :is="item.type === 'select' ? 'el-select' : 'el-input'" v-model="model[item.model]"
        :placeholder="item.placeholder">
        <el-option v-for="(option, optIndex) in item.options" :key="optIndex" :label="option.label"
          :value="option.value" />
      </component>
    </el-form-item>
    <slot name="extra"></slot>
    <el-form-item class="query-btns">
      <el-button @click="resetSearch" style="width: 75px; height: 30px;">重置</el-button>
      <el-button type="primary" @click="searchExperts" style="width: 75px; height: 30px;">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { defineEmits } from 'vue'

const props = defineProps({
  model: {
    type: Object,
    required: true,
  },
  formItems: {
    type: Array,
    required: true,
  },
})

const emit = defineEmits(['search', 'reset'])

const resetSearch = () => {
  Object.keys(props.model).forEach(key => {
    props.model[key] = ''
  })
  emit('reset')
}

const searchExperts = () => {
  emit('search', props.model)
}
</script>

<style scoped>
/* .query-form-inline :deep(.el-form-item) {
  margin-bottom: 0;
}

.query-form-inline :deep(.el-form-item .el-form-item__content) {
  width: 180px;
}

.query-form-inline :deep(.el-form-item .el-select) {
  width: 180px;
}

.query-form-inline {
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
}

.query-form-item {
  margin: 10px;
}

.query-btns {
  width: 165px;
  margin-top: 10px;
  float: right;
} */
.query-form-inline :deep(.el-form-item) {
  margin-bottom: 0;
}

.query-form-inline :deep(.el-form-item .el-select) {
  width: 180px;
}

.query-btns {
  float: right;
}
</style>
